<template>
  <view class="my">
    <view class="login" v-if="token === ''" @click="toLogin">
      <image src="http://120.46.150.252:10004/static/images/teacher1.png" mode=""></image>
      <p>点击登录</p>
    </view>
    <view class="header" v-if="token">
      <view class="top">
        <image src="http://120.46.150.252:10004/static/images/teacher1.png" mode=""></image>
        <span class="userinfo" @click="toPersonal">
          <span class="username">梓枫</span>
          <u-icon name="arrow-right"></u-icon>
        </span>
      </view>
      <view class="bottom">
        <ul @click="toInfoClass">
          <li v-for="item in personinfo.class_info" :key="item.id" :data-info_id="item.id" class="item_mask">
            <h2>{{item.num}}</h2>
            <p>{{item.title}}</p>
          </li>
        </ul>
      </view>
    </view>
    <view class="main">
      <ul @click="infoModule">
        <li class="info_item" v-for="item in info_Module" :key="item.id" :data-title="item.title">
          <span>{{item.title}}</span>
          <u-icon :name="item.icon"></u-icon>
        </li>
      </ul>
    </view>
    <button class="loginout" @click="loginout">退出登录</button>
  </view>
</template>

<script>
  import {
    toPersonal,
    toLogin
  } from '../../utils/common.js'
  import {
    init,
    toInfoClass,
    infoModule,
    loginout
  } from '../../utils/my.js'
  export default {
    data() {
      return {
        token: '',
        personinfo: {
          class_info: [{
              id: 'c1',
              title: '订阅',
              num: 35
            },
            {
              id: 'c2',
              title: '点赞',
              num: 48
            },
            {
              id: 'c3',
              title: '讨论',
              num: 95
            },
          ]
        },
        info_Module: [{
            id: 'changeinfo',
            title: '修改个人信息',
            icon: 'arrow-right'
          },
          {
            id: 'changepasword',
            title: '更改密码',
            icon: 'arrow-right'
          },
          {
            id: 'shareapp',
            title: '分享小程序',
            icon: 'arrow-right'
          },
          {
            id: 'falsenote',
            title: '错题本',
            icon: 'arrow-right'
          },
        ]
      }
    },
    methods: {
      toLogin: toLogin,
      // 页面初始化
      // init() {
      //   const _this = this
      //   uni.getStorage({
      //     key: 'token',
      //     success(res) {
      //       _this.token = res.data
      //     },
      //   })
      // },
      // 跳转到个人主页
      toPersonal: toPersonal,
      // 跳转到用户的课程相关信息页面
      toInfoClass(e) {
        return toInfoClass(e.target.e.target.dataset.info_id)
      },
      // 用户可操作模块
      infoModule(e) {
        return infoModule(e.target.dataset)
      },
      // 退出登录
      loginout() {
        return loginout(this)
      }
    },
    onShow() {
      init(this)
    },
  }
</script>

<style lang="less">
  page {
    background-color: #e2e2e2;
  }

  .my {
    .login {
      padding-top: 80rpx;
      height: 300rpx;
      border-end-end-radius: 60rpx;
      border-end-start-radius: 60rpx;
      text-align: center;
      background-color: #fff;

      image {
        width: 200rpx;
        height: 200rpx;
        border-radius: 50%;
      }

      p {
        margin-top: 20rpx;
        font-size: 36rpx;
        font-weight: 500;
      }
    }

    .header {
      margin: 20rpx;
      padding: 30rpx;
      background-color: #fff;
      border-radius: 30rpx;

      .top {
        padding-bottom: 20rpx;
        display: flex;
        border-bottom: 2rpx solid #e8e8e8;

        image {
          flex: 1;
          width: 160rpx;
          height: 160rpx;
          border-radius: 50%;
        }

        .userinfo {
          flex: 3;
          margin-left: 30rpx;
          display: flex;
          justify-content: space-between;
          text-align: center;
          align-items: center;

          .username {
            font-size: 48rpx;
          }
        }
      }

      .bottom {
        margin-top: 30rpx;

        ul {
          display: flex;
          justify-content: space-around;

          .item_mask {
            position: relative;
            text-align: center;

            &::after {
              content: "";
              position: absolute;
              left: 0;
              top: 0;
              bottom: 0;
              right: 0;
            }
          }
        }
      }
    }

    .main {
      ul {
        .info_item {
          position: relative;
          display: flex;
          justify-content: space-between;
          margin: 20rpx;
          padding: 20rpx;
          height: 80rpx;
          background-color: #fff;
          border-radius: 30rpx;
          align-items: center;

          &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
          }
        }
      }
    }

    .loginout {
      margin: 0 20rpx;
      height: 100rpx;
      line-height: 100rpx;
      color: #fff;
      background-color: #e65862;
      border-radius: 30rpx;
    }
  }
</style>
